<template>
  <el-card class="box-card">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本信息" name="first">
        <el-row>
          头像<img :src="store.userInfo.data.user_pic" class="user-avatar same" alt=" ">
        </el-row>
        <el-row>
          用户名<el-input v-model="store.userInfo.data.username" class="Input same username" disabled/>
        </el-row>
        <el-row>
          用户昵称<el-input v-model="form.nickname" placeholder="请输入用户昵称" class="Input same nickname" />
        </el-row>
        <el-row>
          邮箱<el-input v-model="form.email" placeholder="请输入邮箱号" class="Input same email" />
        </el-row>
        <el-row class="lastRow">
          <el-button type="primary" v-onceClick="10000" plain @click="send">提交</el-button>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import {nextTick, onMounted, reactive, ref} from "vue";
import { Token } from '@/store'
import {changeUserInfo} from "@/api";
import {ElMessage} from "element-plus";

 export default {
  name: "UIndex",
  setup(){
    // 状态
    let activeName = ref('first')
    let store = Token()
    let form = reactive({
      id: '',
      email: '',
      nickname: ''
    })

    // 方法
    let send = async() => {
      const res = await changeUserInfo(form)
      ElMessage.success(res.message)
      store.saveInfo()
    }

    // 生命周期
    onMounted(async () => {
      await store.saveInfo()
      nextTick(() => {
        form.id = store.userInfo.data.id
        form.email = store.userInfo.data.email
        form.nickname = store.userInfo.data.nickname
      })
    })

    return{
      activeName,
      store,
      form,
      send
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 100%;
  padding: 1%;
}
.box-card{
  padding: 1%;
  height: 95%;
}
.user-avatar{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  vertical-align: top;
}
.Input{
  width: 200px;
  margin-top: -5px;
}
.same{
  margin-left: 80px;
}
.username{
  margin-left: 60px;
}
.nickname{
  margin-left: 45px;
}
.email{
  margin-left: 75px;
}
.el-row{
  margin-top: 40px;
  vertical-align: center;
}
.lastRow .el-button{
  margin-left: 50px;
}
</style>
